<template>
    <div class="wizard-steps">
        <div class="step-com" simple>
            <el-steps :active="active" align-center>
                <el-step :title="$t('wizard.connectionDetection')"></el-step>
                <el-step :title="$t('wizard.basicSettings')"></el-step>
                <el-step :title="$t('wizard.completed')"></el-step>
            </el-steps>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        // 标题
        active: {
            type: Number,
            required: true
        }
    }
};
</script>

<style lang="less" scoped>
@Color: #303133;
.wizard-steps {
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;

    .step-com {
        width: 50%;
    }

    @media (max-width: 1020px) {
        .step-com {
            width: 90%;
        }
    }

    /deep/.is-wait {
        color: @Color;
        font-weight: bold;
        .el-step__icon.is-text {
            border-color: @Color;
        }
    }

    /deep/.is-finish {
        font-weight: bold;
        color: @blueColor;
        border-color: @blueColor;
    }

    @media (max-width: 600px) {
        /deep/.el-step__title {
            font-size: 0.8em;
        }
    }
}
</style>
